<template>
  <view class="aster-toolbar" @touchmove.stop.prevent="noop" v-if="show">
    <view class="aster-toolbar__cancel__wrapper" hover-class="aster-hover-class">
      <text
        class="aster-toolbar__wrapper__cancel"
        @tap="cancel"
        :style="{
          color: props.cancelColor,
        }"
        >{{ props.cancelText }}</text
      >
    </view>
    <text class="aster-toolbar__title aster-line-1" v-if="title">{{ props.title }}</text>
    <view class="aster-toolbar__confirm__wrapper" hover-class="aster-hover-class">
      <text
        class="aster-toolbar__wrapper__confirm"
        @tap="confirm"
        :style="{
          color: props.confirmColor,
        }"
        >{{ props.confirmText }}</text
      >
    </view>
  </view>
</template>

<script lang="ts" setup>
  const props = defineProps({
    // 是否展示工具条
    show: {
      type: Boolean,
      default: true,
    },
    // 取消按钮的文字
    cancelText: {
      type: String,
      default: () => '取消',
    },
    // 确认按钮的文字
    confirmText: {
      type: String,
      default: () => '确认',
    },
    // 取消按钮的颜色
    cancelColor: {
      type: String,
      default: () => '#909193',
    },
    // 确认按钮的颜色
    confirmColor: {
      type: String,
      default: () => '#3c9cff',
    },
    // 标题文字
    title: {
      type: String,
      default: () => '',
    },
  });

  const emits = defineEmits(['cancel', 'confirm']);
  /** 点击取消按钮 */
  const cancel = () => {
    emits('cancel');
  };
  /** 点击确定按钮 */
  const confirm = () => {
    emits('confirm');
  };
  /** 阻止事件冒泡 */
  const noop = (e: any) => {
    e && typeof e.stopPropagation === 'function' && e.stopPropagation();
  };
</script>

<style lang="scss" scoped>
  view,
  scroll-view,
  swiper-item {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    flex-grow: 0;
    flex-basis: auto;
    align-items: stretch;
    align-content: flex-start;
  }

  .aster-toolbar {
    height: 42px;
    /* #ifndef APP-NVUE */
    display: flex;
    /* #endif */
    flex-direction: row;
    justify-content: space-between;
    align-items: center;

    &__wrapper {
      &__cancel {
        color: #909193;
        font-size: 15px;
        padding: 0 15px;
      }
    }

    &__title {
      color: #303133;
      padding: 0 60rpx;
      font-size: 16px;
      flex: 1;
      text-align: center;
    }

    &__wrapper {
      &__confirm {
        color: #3c9cff;
        font-size: 15px;
        padding: 0 15px;
      }
    }
  }
</style>
